<template>
    <div class="users-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="users">
              <div class="tab">
                <el-table
                  :data="users"
                  v-loading="loading"
                  style="width: 100%">
                  <el-table-column
                    prop="unid"
                    label="unid"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="nickname"
                    label="昵称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="vipLevel"
                    label="vip等级">
                  </el-table-column>
                  <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="medium"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="medium"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
    </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="roles">角色管理</el-tab-pane>
        </el-tabs>
         <!-- <router-view></router-view> -->
    </div>
</template>

<script>
  import * as api from "../../../api/users" 
  export default {
    data() {
      return {
        activeName: 'users',
        users:[],
        loading:false
      };
    },
    created(){
      api.getAllUsersApi()
      .then(res => {
        // console.log(res);
        this.users = res.data.data
      })
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
    meta: {
        title: 'yhgl',
        name:"用户管理",
        icon: 'iconfont icon-yonghu'
    }
  };
</script>


<style lang="less" scoped>
.el-button--default{
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
/deep/ .cell{
    text-align: center;
}
</style>
